import React, { Component, Fragment } from 'react';
import { Table, Pagination, Button } from 'antd';
import Permissions from '@/components/Permissions';

import PropTypes from 'prop-types';
import './index.scss'
const { Column } = Table;
export default class TableCom extends Component {
	static defaultProps = {
		isBordered: true,
		size: 'small',
		align: 'center',
		isPagination: true,
		isTableIndex: true,
		columnWidth: 100,
		pageOptions: {
			pageNum: 1,
			pageSizes: ['100', '150', '200'],
			pageSize: 100,
		}
	}
	static propTypes = {
		url: PropTypes.string.isRequired, // 接口地址
		isBordered: PropTypes.bool, // 是否带有纵向边框
		size: PropTypes.string, // 表格大小
		align: PropTypes.string, // 对齐
		isPagination: PropTypes.bool, // 是否展示分页
		columnWidth: PropTypes.number, // 列宽
		pageSizeOptions: PropTypes.object, // 分页器配置
		isTableIndex: PropTypes.bool // 是否有序号
	}

	state = {
		queryForm: {},
		dataSource: [],
		tableLoading: true,
		pageOptions: this.props.pageOptions
	}

	// 获取表格数据
	async fetchData (pagination, queryForm = {}, callback) {
		if (queryForm !== false) {
			this.state.queryForm = queryForm;
		}
		try {
			this.setState({
				tableLoading: true
			})
			let result = await $api.tableFetchData({
				url: this.props.url,
				data: { ...pagination, ...this.state.queryForm }
			});
			this.setState({
				dataSource: result.data.list,
				tableTotal: result.data.tableTotal,
				pageOptions: { ...this.state.pageOptions, ...pagination }
			})
			callback && callback();
		} finally {
			callback && callback();
			this.setState({
				tableLoading: false
			})
		}

	}

	// 控制每页展示多少条
	onShowSizeChange = (current, pageSize) => {
		this.state.pageOptions = { ...this.state.pageOptions, pageSize }
		this.fetchData({
			pageNum: current,
			pageSize: pageSize
		}, false)
	}

	// 控制当前分页页数
	onChange = (pageNum) => {
		this.state.pageOptions = { ...this.state.pageOptions, pageNum }
		this.fetchData({
			pageNum,
			pageSize: this.state.pageOptions.pageSize
		}, false)
	}

	componentDidMount () {
		this.fetchData({
			pageNum: 1,
			pageSize: 100
		}, false)
	}

	render () {
		const { size, isBordered, tableColumns, tableOperate, align, operateWidth, isPagination, isTableIndex, columnWidth } = this.props
		const { tableLoading, dataSource, tableTotal, pageOptions } = this.state
		return (
			<Fragment>
				<Table
					scroll={{ x: '100%' }}
					loading={tableLoading}
					dataSource={dataSource}
					pagination={false}
					size={size} bordered={isBordered}
					rowKey={(record, index) => index}
				>
					{
						isTableIndex && <Column width={columnWidth} align={align} title={'序号'} key={'xh'} render={(text, record, index) => {
							return (pageOptions.pageNum - 1) * pageOptions.pageSize + (index + 1)
						}} />
					}
					{
						tableColumns.map(item => {
							return <Column width={item.width || columnWidth} ellipsis={item.ellipsis || false} align={align} title={item.title} dataIndex={item.key} key={item.key} render={
								(text, record, index) => {
									// 模拟vue 插槽
									const ChildrenNode = this.props[item.key]
									if (ChildrenNode) {
										return <ChildrenNode {...item.event} {...record} />
									} else {
										if (item.event) {
											return <div onClick={() => this.props.handlerTable(item.event, record)} style={{ color: '#409EFF', cursor: 'pointer' }}>{record[item.key]}</div>
										} else {
											return record[item.key]
										}
									}

								}
							} />
						})
					}
					{
						tableOperate.length &&
						<Column fixed={'right'} width={operateWidth} align={align} title={'操作'} render={
							(text, record, index) => {
								return tableOperate.map((item, index) => {
									return (<Permissions key={index} perm={item.role}><Button onClick={() => this.props.handlerOperate(item, record)} className={item.color} style={{ marginRight: 5 }} size={'small'}>{item.title}</Button></Permissions>)
								}
								)
							}
						} />

					}
				</Table>
				{
					isPagination &&
					<Pagination
						className='position-f-r'
						showSizeChanger
						onChange={this.onChange}
						onShowSizeChange={this.onShowSizeChange}
						defaultCurrent={pageOptions.pageNum}
						defaultPageSize={pageOptions.pageSize}
						pageSizeOptions={pageOptions.pageSizes}
						showTotal={(total) => `共${total}条`}
						total={tableTotal}
					/>
				}
			</Fragment>
		);
	}
}
